<template>
  <!-- 歌单 -->
  <view class="musicList">
    <!-- 头部 -->

    <view
      class="bg"
      :style="{ background: 'url(' + listDet.coverImgUrl + ')' }"
    ></view>
    <view class="bg2"></view>
    <view class="header appFlex-one">
      <view class="left">
        <image :src="listDet.coverImgUrl" mode="" />
      </view>
      <view class="right">
        <view class="name">飙升版</view>
        <view class="middle appFlex-two">
          <image :src="listDet.coverImgUrl" mode="" />
          <view>燚淼音乐</view>
        </view>
        <view class="info app-text2"> {{ listDet.description }} </view>
      </view>
    </view>
    <!-- 列表部分 -->
    <view class="list">
      <!-- 头部 -->
      <view class="listTop appFlex-thor">
        <image src="@/static/img/play.png" mode="" />
        <view class="playAll">播放全部</view>
        <view class="count">({{ newListData.length }})</view>
      </view>
      <!-- 列表歌曲 -->
      <view
        class="listItem appFlex-one"
        v-for="(item, index) in newListData"
        :key="index"
        @click="goPlayDet(item, index)"
      >
        <view class="num">{{ index + 1 }}</view>
        <view class="middle">
          <view class="name app-text">{{ item.songs[0].name }}</view>
          <view class="nameAndSong app-text"
            >{{ item.songs[0].name }}-{{ item.songs[0].ar[0].name }}</view
          >
        </view>
        <view class="iconfont icon-bofang icon"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(option) {
    const item = JSON.parse(option.musitList);
    this.listData = item;
    this.getMusicData(option.id);
  },
  data() {
    return {
      listDet: "",
      listData: [],
      newListData: [],
    };
  },
  watch: {
    listData(newValue) {
      for (let i = 0; i < newValue.length; i++) {
        let ids = newValue[i].id;
        this.getMusicDet(ids);
      }
    },
  },
  methods: {
    // 获取排行榜详情
    getMusicData(id) {
      this.request("/playlist/detail", "GET", { id }).then((res) => {
        this.listDet = res.playlist;
      });
    },
    // 获取音乐详情
    getMusicDet(ids) {
      this.request("/song/detail", "GET", { ids }).then((res) => {
        this.newListData.push(res);
      });
    },
    //跳转播放详情
    goPlayDet(item, index) {
      this.$store.commit("changePalyList", this.newListData);
      this.$store.commit("changePlay", true);
      this.$store.commit("changeCurrentIndex", index);

      let id = item.songs[0].id;
      uni.navigateTo({
        url: "/pagesC/playDet/PlayDet?id=" + id,
      });
      uni.setNavigationBarTitle({
        title: item.songs[0].name,
      });
    },
  },
};
</script>

<style lang="less">
.musicList {
  position: relative;
  width: 750rpx;

  .bg {
    position: absolute;
    width: 100%;
    height: 400rpx;
    top: 0;
    left: 0;
    z-index: 1;
    filter: blur(6px);
  }
  .bg2 {
    position: absolute;
    width: 100%;
    height: 400rpx;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
  }
  .header {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 400rpx;

    .left {
      margin-left: 30rpx;
      width: 240rpx;
      height: 240rpx;
      image {
        width: 240rpx;
        height: 240rpx;
        border-radius: 20rpx;
        border: 2rpx solid solid;
        margin-left: 50rpx;
      }
    }
    .right {
      margin-right: 30rpx;
      width: 300rpx;
      height: 240rpx;
      .name {
        color: #fff;
        font-size: 40rpx;
      }

      .middle {
        height: 100rpx;
        width: 100%;
        line-height: 100rpx;
        image {
          width: 60rpx;
          height: 60rpx;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 50%;
          margin-top: 22rpx;
        }
        view {
          font-size: 26rpx;
          color: #f1f201;
          margin-left: 12rpx;
        }
      }
      .info {
        width: 100%;
        height: 100rpx;
        font-size: 24rpx;
        color: #fafafa;
      }
    }
  }
  .list {
    .listTop {
      position: relative;
      top: -20rpx;
      z-index: 6;
      width: 750rpx;
      height: 120rpx;
      border-radius: 35rpx 35rpx 0 0;
      background: #ffffff;
      image {
        width: 60rpx;
        height: 60rpx;
        margin-left: 35rpx;
      }
      .playAll {
        margin-left: 35rpx;
      }
      .count {
        margin-left: 24rpx;
        color: #666;
      }
    }
    .listItem {
      width: 750rpx;
      height: 150rpx;
      border-bottom: 2rpx solid #999;
      .num {
        margin-left: 30rpx;
        font-size: 40rpx;
        color: #999;
      }
      .middle {
        // margin-left: -270rpx;
        width: 400rpx;
        .name {
          font-size: 40rpx;
        }
        .nameAndSong {
          font-size: 30rpx;
          color: #999;
        }
      }
      .icon {
        margin-right: 30rpx;
        font-size: 70rpx;
        color: #999;
      }
    }
  }
}
</style>